<template>
    <div class="app-container">
        <uploadexcelcomponent :on-success="handleSuccess" :before-upload="beforeUpload"></uploadexcelcomponent>
        <el-table :data="tableData" border highlight-current-row style="width: 100%;margin-top:20px;">
            <el-table-column v-for="item of tableHeader" :key="item" :prop="item" :label="item" />
        </el-table>
    </div>
</template>

<script>
    const l = httpVueLoader;
    const UploadExcelComponent = l('/vue/components/UploadExcel/index.vue');
    module.exports = {
        name: 'UploadExcel',
        components: { "uploadexcelcomponent": UploadExcelComponent },
        data() {
            return {
                tableData: [],
                tableHeader: []
            }
        },
        methods: {
            beforeUpload(file) {
                const isLt1M = file.size / 1024 / 1024 < 1

                if (isLt1M) {
                    return true
                }

                this.$message({
                    message: 'Please do not upload files larger than 1m in size.',
                    type: 'warning'
                })
                return false
            },
            handleSuccess({ results, header }) {
                this.tableData = results
                this.tableHeader = header
            }
        }
    }
</script>
